<%@ page import="nl.liacs.mms.dn.server.DigitalNotesService" %>
<%@ page import="nl.liacs.mms.dn.entities.DigitalNote" %>
<%@ page import="java.util.List" %>
<%
	DigitalNotesService service = new DigitalNotesService();
    List<DigitalNote> notes = service.getAllNotes();
%>

<%@include file="includes/header.jsp" %>
  	<div id="map_canvas" style="width: 100%; height: 300px;"></div>



	<div class="footer">
		<p>&copy; Manuel Spierenburg &amp; Filippo Monte 2012</p>
   	</div>
    </div> <!-- /container -->
    <!-- javascript -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
	var leiden = new google.maps.LatLng(52.166141, 4.481564);
	var marker;
	var map;
	var geocoder;

	function initialize() {
		var leiden = new google.maps.LatLng(52.166141, 4.481564);
		var mapOptions = {
			zoom : 15,
			mapTypeId : google.maps.MapTypeId.ROADMAP,
			center: leiden
		};

		geocoder = new google.maps.Geocoder();
		map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

		<% for(DigitalNote note:notes){ %>
		var leiden = new google.maps.LatLng(<%= note.getLatitude() %>,<%= note.getLongitude() %>);
		marker = new google.maps.Marker({
			map : map,
			draggable : false,
			animation : google.maps.Animation.DROP,
			position: leiden
		});
		<% } %>
	}

	$(document).ready(function() {
		initialize();
	});
	</script>
  </body>
</html>